<template>
    <div class="main config-brand-auth-list">
        <section>
            <div v-if="rightsButtons['add']" class="btn-block">
                <el-button type="success" size="small" icon="el-icon-circle-plus" @click="addBrand" plain>新建授权</el-button>
            </div>
            <el-form ref="searchForm" class="search-block" :model="listQuery" label-position="left" label-width="82px">
                <input type="text" style="display: none"/>
                <el-row :gutter="50">
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
                      <el-form-item label="商家名称：" prop="shop_name">
                        <el-input @keyup.enter.native="search" v-model="listQuery.shop_name" placeholder="商家名称" maxlength="50" clearable></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
                      <el-form-item label="品牌类型：" prop="brand_type">
                        <el-select v-model="listQuery.brand_type" style="width: 100%" clearable="">
                            <el-option label="授权品牌" value="AUTH"></el-option>
                            <el-option label="自有品牌" value="SELF"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="" class="btn-item">
                    <el-button type="primary" size="mini" icon="el-icon-search" plain @click="search">搜索</el-button>
                    <span class="btn-reset" @click="resetForm('searchForm')">清空搜索条件</span>
                </el-form-item>
            </el-form>
            <el-table :data="list" v-loading="listLoading" header-row-class-name="table-header" element-loading-text="给我一点时间" border highlight-current-row>
                <el-table-column align="center" label="商家编码" prop="accountId"></el-table-column>
                <el-table-column align="center" label="商家名称" prop="shopName"></el-table-column>
                <el-table-column align="center" label="品牌类型" :formatter="brandTypeFormat" prop="brandType"></el-table-column>
                <el-table-column align="center" label="授权时间">
                    <template slot-scope="scope">
                        <span>{{formatDate(scope.row.authTime, 'YYYY-MM-DD HH:mm:ss')}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作" width="120" >
                    <template slot-scope="scope">
                        <el-button v-if="rightsButtons['cancelauth']" type="primary" size="mini" @click="cancelAuth(scope.row.id)">解除授权</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="listQuery.page"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="listQuery.page_size"
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listTotal">
            </el-pagination>
        </section>

        <el-dialog title="新建授权" :visible.sync="showEditPop" :before-close="cancel">
            <el-form :model="editItem" :rules="editRule" size="medium" ref="editItem" label-width="120px">
                <el-form-item label="品牌名称:" prop="brandName">
                    <el-input v-model="editItem.brandName" :disabled='true'></el-input>
                </el-form-item>
                <el-form-item label="授权商家:" prop="shopId">
                    <el-select v-model="editItem.shopId" filterable  style="width: 100%" clearable="">
                        <el-option
                        v-for="item in shopOptions"
                        :key="item.shopId"
                        :label="item.shopName"
                        :value="item.shopId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="授权类型:" prop="brandType">
                    <el-select v-model="editItem.brandType" style="width: 100%" clearable="">
                        <el-option label="授权品牌" value="AUTH"></el-option>
                        <el-option label="自有品牌" value="SELF"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="save" :disabled="btnDisabled" :loading="loading">保存</el-button>
                <el-button @click="cancel">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
  import { getBrandAuthList, getShopList, addBrandAuth, cancelBrandAuth } from '@/api/merchantsys/config'
    export default {
        name: 'brandAuthConfigList',
        data() {
            return {
                shopOptions:[],
                list: [],
                listQuery: {
                    brand_id:null,
                    shop_name: '',
                    brand_type:'',
                    page: 1,
                    page_size: 10
                },
                pList: [],
                listTotal: 0,
                listLoading: false,
                loading:false,
                editItem:{
                    brandName:'',
                    brandId:'',
                    shopId:'',
                    brandType:''
                },
                editRule: {
                    brandName: [
                        {required: true, message: '不能为空', trigger: 'blur'}
                    ],
                    shopId:[
                        {required: true, message:'请选择', trigger: 'change'}
                    ],
                    brandType:[
                        {required: true, message:'请选择', trigger: 'change'}
                    ]
                },
                showEditPop: false,
                btnDisabled: false,
            }
        },
        created() {
            this.getList()
            this.loadShopList()
        },
        methods: {
            loadShopList(){
                let brandId = this.$route.params.id
                this.editItem.brandId = brandId
                this.editItem.brandName=this.$route.query.brandName
                getShopList({brand_id:brandId}).then(res=>{
                    this.shopOptions=res.data
                })
            },
            brandTypeFormat(item){
                return {'SELF':'自有品牌', 'AUTH':'授权品牌'}[item.brandType]
            },
            cancelAuth(id){
                this.$confirm(`确定解除授权?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    cancelBrandAuth({id:id}).then(res=>{
                         this.$message.success('解除授权成功')
                         this.getList()
                    })
                })
            },
            addBrand(){
                this.showEditPop = true;
                this.btnDisabled = false;
            },
            clearData(){
                this.editItem.shopId=''
                this.editItem.brandType=''
            },
            cancel(){
                this.clearData()
                this.showEditPop = false
            },
            save() {
                this.$refs.editItem.validate(valid => {
                    if (!valid) {
                        return false;
                    }
                    this.loading = true
                    addBrandAuth({brand_type:this.editItem.brandType, shop_id:this.editItem.shopId, brand_id:this.editItem.brandId}).then(res=>{
                        this.showEditPop = false;
                        this.$message.success('保存成功')
                        this.clearData()
                        this.getList()
                        this.loadShopList()
                    }).catch(err=>{
                        this.loading = false
                    })
                });
            },
            getList(){
                this.listQuery.brand_id = this.$route.params.id
                this.listLoading = true;
                getBrandAuthList(this.listQuery).then(res => {
                this.list = res.data.data;
                this.listTotal = res.data.total;
                this.listLoading = false;
                }).catch(err => {
                    this.list = [];
                    this.listTotal = 0;
                    this.listLoading = false;
                })
            },
            // 清空搜索条件
            resetForm (formName) {
                this.$nextTick(() => {
                    this.$refs[formName].resetFields()
                })
            },
                // 搜索
                search() {
                    this.listQuery.page = 1;
                    this.getList();
                },
                //切换每页条数
                handleSizeChange (value) {
                    this.listQuery.page_size = value;
                    this.getList()
                },
                // 切换分页
                handleCurrentChange(page) {
                    this.listQuery.page = page;
                    this.getList();
                },
        }
    }
</script>

<style lang="scss">
    .ad-manage-list>section{
        padding: 24px;
        background: #fff;
    }
</style>
